<template>
	<view class="container" v-if="JSON.stringify(detailItem) !== '{}'">
		<view class="detail container-item">
			<view class="title">企业详情</view>
			<!-- 收藏 #F8D347-->
			<view class="favi" @click="clickFavi">
				<uni-icons custom-prefix="iconfont" :type="faviState ? faviList[1] : faviList[0]" size="32"></uni-icons>
			</view>
			<view class="content">
				<view class="hd">
					<image src="../../static/page1.jpg" mode="widthFix"></image>
					<view class="comname">{{ detailItem.id }}广州雅虎信息科技</view>
				</view>
				<ul class="bd">
					<li>
						<text>简介：</text>
						<text>广州雅虎科技信息2011年上市，旗下有3个门户该网站，在华南、华东等拥有5个研发机构</text>
					</li>
					<li>
						<text>企业所在地：</text>
						<text>广东省广州市</text>
					</li>
					<li>
						<text>企业地址：</text>
						<text>广东省广州市果果路11号</text>
					</li>
					<li>
						<text>薪资范围：</text>
						<text>3—7k</text>
					</li>
					<li>
						<text>招聘人数：</text>
						<text>1000人</text>
					</li>
					<li>
						<text>招聘岗位：</text>
						<text>UI设计师、测试专员、网络工程师</text>
					</li>
					<li>
						<text>开放时间：</text>
						<text>2022.4.1—2022.8.1</text>
					</li>
					<li>
						<text>企业负责人：</text>
						<text>云梦</text>
					</li>
					<li>
						<text>企业负责人联系方式：</text>
						<text>13888888888</text>
					</li>
				</ul>
			</view>
		</view>
		<view class="newwork container-item">
			<view class="title">最新职位</view>
			<view class="recruitlists">
				<view class="recuirLists-item" v-for="(item1, index1) in recruitData" :key="item1.id">
					<recruitList :recruitData="item1" @recruitDetail="gotoDetail"></recruitList>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';

export default {
	data() {
		return {
			// 企业列表的数据
			detailItem: {},
			// 岗位列表的数据
			recruitData: [
				{
					id: 1,
					title: '1JAVA开发工程师',
					require: '广州市 | 应届毕业生 | 专科及以上',
					img: '/static/page1.jpg',
					comname: '广州无限大科技有限公司',
					welfare: ['五险一金', '年底双薪', '周末双休'],
					salary: '3K-5K',
					cometime: '30分钟前'
				},
				{
					id: 2,
					title: '2JAVA开发工程师',
					require: '广州市 | 应届毕业生 | 专科及以上',
					img: '/static/page1.jpg',
					comname: '广州无限大科技有限公司',
					welfare: ['五险一金', '年底双薪', '周末双休'],
					salary: '3K-5K',
					cometime: '30分钟前'
				}
			],
			// 收藏图标的两种状态
			faviList: ['icon-shoucang1', 'icon-shoucang']
		};
	},
	onLoad(options) {
		// console.log(options.item);
		// 解密url参数对象
		if (options.item) {
			this.detailItem = JSON.parse(decodeURIComponent(options.item));
		} else {
			// 没有详情数据，返回列表页面
			uni.$showMsg('没有详情数据', 1500);
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/company/company'
				});
			}, 1500);
		}
	},
	methods: {
		...mapMutations('m_collect', ['setCommpanyList', 'delCommpanyList']),

		// 点击跳转去岗位详情
		gotoDetail(item) {
			uni.navigateTo({
				// url要传id参数
				// 加密url参数对象
				url: '/subpkg/recruit/recruitDetail?item=' + encodeURIComponent(JSON.stringify(item))
			});
		},

		// 点击收藏
		clickFavi() {
			if (this.token) {
				// 取反收藏状态，并更新vuex的commpanyList和本地存储
				this.detailItem.collectState = !this.faviState;

				// 已收藏
				if (this.detailItem.collectState) {
					uni.$showMsg('已收藏！', 1000);
					// 追加该列表到vuex的commpanyList，并本地存储
					this.setCommpanyList(this.detailItem);
				} else {
					// 取消收藏
					uni.$showMsg('已取消收藏！', 1000);
					this.delCommpanyList(this.detailItem);
				}
			} else {
				// 无token下，需要登录才能收藏
				uni.$showMsg('请登录！', 1500);
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/my/my'
					});
				}, 1500);
			}
		}
	},
	computed: {
		...mapState('m_collect', ['commpanyList']),
		...mapState(['token']),

		faviState() {
			if (this.token) {
				var pi = this.commpanyList.findIndex((item) => item.id === this.detailItem.id);
				// vuex若有该项，则为已收藏
				return pi < 0 ? false : true;
			} else {
				// 无token下，图标全部不点亮
				return false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
// 收藏
::v-deep .icon-shoucang,
::v-deep .icon-shoucang1 {
	color: white !important;
	font-size: 64rpx !important;
}
::v-deep .icon-shoucang {
	color: #f8d347 !important;
}
.favi {
	position: absolute;
	right: 80rpx;
	top: 24rpx;
	cursor: pointer;
}
.container {
	position: relative;
	padding-bottom: 40rpx;
}
.container-item {
	background-color: white;
	margin: 60rpx 30rpx;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 0 16rpx #ccc;
	.title {
		font-size: 36rpx;
		padding: 30rpx 40rpx;
		background-color: #00dcb6;
		color: white;
		font-weight: 700;
	}
	// 企业详情
	.content {
		display: flex;
		flex-direction: column;
		padding: 46rpx;
		.hd {
			display: flex;
			align-items: center;
			image {
				width: 140rpx;
				height: 140rpx;
			}
			.comname {
				font-size: 40rpx;
				margin-left: 56rpx;
			}
		}
		.bd {
			font-size: 28rpx;
			li {
				margin-top: 10rpx;
				&:first-child {
					margin: 40rpx 0 30rpx;
				}
			}
		}
	}

	// 最新职位
	.recruitlists {
		.recuirLists-item {
			border-top: 2rpx solid #bbbbbb;
			&:first-child {
				border: 0;
			}
		}
	}
}
</style>
